<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bug详情 - MiniBug</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .status-open { @apply bg-red-100 text-red-800; }
        .status-in_progress { @apply bg-yellow-100 text-yellow-800; }
        .status-resolved { @apply bg-green-100 text-green-800; }
        .status-closed { @apply bg-gray-100 text-gray-800; }
        
        .priority-low { @apply bg-blue-100 text-blue-800; }
        .priority-medium { @apply bg-yellow-100 text-yellow-800; }
        .priority-high { @apply bg-orange-100 text-orange-800; }
        .priority-critical { @apply bg-red-100 text-red-800; }
    </style>
</head>
<body class="bg-gray-50">
    <nav class="bg-white shadow-sm border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <a href="/bugs" class="text-xl font-bold text-gray-900">MiniBug</a>
                </div>
                <div class="flex items-center space-x-4">
                    <span id="user-info" class="text-sm text-gray-700"></span>
                    <button onclick="logout()" class="text-sm text-gray-500 hover:text-gray-700">退出</button>
                </div>
            </div>
        </div>
    </nav>
    
    <main class="max-w-4xl mx-auto py-6 sm:px-6 lg:px-8">
        <div class="px-4 py-6 sm:px-0">
            <div class="mb-6">
                <a href="/bugs" class="text-indigo-600 hover:text-indigo-500 text-sm font-medium">← 返回Bug列表</a>
            </div>
            
            <div id="bug-detail" class="bg-white shadow overflow-hidden sm:rounded-lg">
                <!-- Bug详情将在这里动态加载 -->
            </div>
        </div>
    </main>

    <script>
        const bugId = {{.bug_id}};
        
        // 加载Bug详情
        function loadBugDetail() {
            $.ajax({
                url: `/api/bugs/${bugId}`,
                method: 'GET',
                success: function(bug) {
                    displayBugDetail(bug);
                },
                error: function(xhr) {
                    if (xhr.status === 404) {
                        alert('Bug不存在');
                        window.location.href = '/bugs';
                    } else {
                        window.location.href = '/login';
                    }
                }
            });
        }
        
        // 显示Bug详情
        function displayBugDetail(bug) {
            const statusClass = `status-${bug.status}`;
            const priorityClass = `priority-${bug.priority}`;
            
            const statusText = {
                'open': '打开',
                'in_progress': '进行中',
                'resolved': '已解决',
                'closed': '已关闭'
            }[bug.status] || bug.status;
            
            const priorityText = {
                'low': '低',
                'medium': '中',
                'high': '高',
                'critical': '紧急'
            }[bug.priority] || bug.priority;
            
            const createdAt = new Date(bug.created_at).toLocaleString('zh-CN');
            const updatedAt = new Date(bug.updated_at).toLocaleString('zh-CN');
            
            let html = `
                <div class="px-4 py-5 sm:px-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                #${bug.id} ${bug.title}
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500">
                                创建于 ${createdAt} • 更新于 ${updatedAt}
                            </p>
                        </div>
                        <div class="flex items-center space-x-3">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusClass}">
                                ${statusText}
                            </span>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${priorityClass}">
                                ${priorityText}
                            </span>
                        </div>
                    </div>
                </div>
                
                <div class="border-t border-gray-200">
                    <dl>
                        <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                            <dt class="text-sm font-medium text-gray-500">项目</dt>
                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">${bug.project.name}</dd>
                        </div>
                        <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                            <dt class="text-sm font-medium text-gray-500">报告人</dt>
                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">${bug.reporter.name} (${bug.reporter.username})</dd>
                        </div>
                        ${bug.assignee ? `
                        <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                            <dt class="text-sm font-medium text-gray-500">负责人</dt>
                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">${bug.assignee.name} (${bug.assignee.username})</dd>
                        </div>
                        ` : ''}
                        <div class="bg-white px-4 py-5 sm:px-6">
                            <dt class="text-sm font-medium text-gray-500 mb-2">描述</dt>
                            <dd class="text-sm text-gray-900 whitespace-pre-wrap">${bug.description || '无描述'}</dd>
                        </div>
                        ${bug.pictures && bug.pictures.length > 0 ? `
                        <div class="bg-gray-50 px-4 py-5 sm:px-6">
                            <dt class="text-sm font-medium text-gray-500 mb-4">相关图片</dt>
                            <dd class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                                ${bug.pictures.map(picture => `
                                    <div class="relative group">
                                        <img src="/api/images/${picture.filename}" alt="${picture.original_name}" 
                                             class="w-full h-32 object-cover rounded-lg cursor-pointer hover:opacity-75"
                                             onclick="showImageModal('/api/images/${picture.filename}', '${picture.original_name}')">
                                    </div>
                                `).join('')}
                            </dd>
                        </div>
                        ` : ''}
                    </dl>
                </div>
                
                <div class="bg-gray-50 px-4 py-3 sm:px-6">
                    <div class="flex justify-end space-x-3">
                        <button onclick="updateBugStatus('${bug.status}')" 
                                class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                            更新状态
                        </button>
                        <button onclick="deleteBug()" 
                                class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                            删除Bug
                        </button>
                    </div>
                </div>
            `;
            
            $('#bug-detail').html(html);
        }
        
        // 更新Bug状态
        function updateBugStatus(currentStatus) {
            const statusOptions = [
                { value: 'open', text: '打开' },
                { value: 'in_progress', text: '进行中' },
                { value: 'resolved', text: '已解决' },
                { value: 'closed', text: '已关闭' }
            ];
            
            let optionsHtml = statusOptions.map(option => 
                `<option value="${option.value}" ${option.value === currentStatus ? 'selected' : ''}>${option.text}</option>`
            ).join('');
            
            const newStatus = prompt(`选择新状态:\n${statusOptions.map(opt => `${opt.value}: ${opt.text}`).join('\n')}\n\n请输入状态值:`, currentStatus);
            
            if (newStatus && newStatus !== currentStatus) {
                $.ajax({
                    url: `/api/bugs/${bugId}`,
                    method: 'PUT',
                    contentType: 'application/json',
                    data: JSON.stringify({ status: newStatus }),
                    success: function() {
                        alert('状态更新成功！');
                        loadBugDetail();
                    },
                    error: function(xhr) {
                        const error = xhr.responseJSON ? xhr.responseJSON.error : '更新失败';
                        alert(error);
                    }
                });
            }
        }
        
        // 删除Bug
        function deleteBug() {
            if (confirm('确定要删除这个Bug吗？此操作不可恢复。')) {
                $.ajax({
                    url: `/api/bugs/${bugId}`,
                    method: 'DELETE',
                    success: function() {
                        alert('Bug删除成功！');
                        window.location.href = '/bugs';
                    },
                    error: function(xhr) {
                        const error = xhr.responseJSON ? xhr.responseJSON.error : '删除失败';
                        alert(error);
                    }
                });
            }
        }
        
        // 显示图片模态框
        function showImageModal(src, alt) {
            const modal = `
                <div id="image-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" onclick="closeImageModal()">
                    <div class="max-w-4xl max-h-full p-4">
                        <img src="${src}" alt="${alt}" class="max-w-full max-h-full object-contain rounded-lg">
                        <button onclick="closeImageModal()" class="absolute top-4 right-4 text-white text-2xl hover:text-gray-300">×</button>
                    </div>
                </div>
            `;
            $('body').append(modal);
        }
        
        // 关闭图片模态框
        function closeImageModal() {
            $('#image-modal').remove();
        }
        
        // 退出登录
        function logout() {
            $.ajax({
                url: '/api/logout',
                method: 'POST',
                success: function() {
                    window.location.href = '/login';
                }
            });
        }
        
        $(document).ready(function() {
            loadBugDetail();
        });
    </script>
</body>
</html>
